<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>
		</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			.list {
				width: 150px;
				margin: 0 auto;
				height: 500px;
			}

			a {
				border-radius: 5px;
				text-decoration: none;
				display: block;
				height: 30px;
				width: 100%;
				position: relative;
				color: #fff;
				font-size: 13px;
				background: #DADADA;
				line-height: 30px;
				border-bottom: 1px solid #dedede;
				/* text-align: center; */
				padding-left: 50px;
				box-sizing: border-box;

			}

			li {
				list-style: none;
			}

			.t2,
			.t3,
			.t4 {
				display: none;
			}

			i {
				width: 16px;
				height: 16px;
				position: absolute;
				top: 8px;
				left: 15px;
				/* padding:7px 0px; */
				display: inline-block;
				background: url(img/leftJia.png) no-repeat;
			}

			.current {
				background: #8A0706;
				font-size: 16px;
			}
		</style>
	</head>

	<body>

		<div class="list">
			<ul class='t1'>
				<li>
					<a href="javascript:;" title="1" onclick="sum1($(this),$(this).attr('title'))"><i></i>一级菜单</a>
					<ul class='t2'>
						<li><a href="javascript:;">二级菜单</a></li>

						<li>
							<a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>二级菜单</a>
							<ul class='t3'>
								<li><a href="javascript:;">三级菜单</a></li>

								<li>
									<a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>三级菜单</a>
									<ul class='t4'>
										<li><a href="javascript:;">四级菜单</a> </li>
										<li><a href="javascript:;">四级菜单</a> </li>
									</ul>
								</li>
								<li><a href="javascript:;">二级菜单</a></li>

							</ul>
						</li>
						<li><a href="javascript:;">二级菜单</a></li>

					</ul>
				</li>
				<li>
					<a href="javascript:;" title="1" onclick="sum1($(this),$(this).attr('title'))"><i></i>一级菜单</a>
					<ul class='t2'>
						<li><a href="javascript:;">二级菜单</a></li>
						<li><a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>二级菜单</a>
							<ul class='t3'>
								<li><a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>三级菜单</a>
									<ul class='t4'>
										<li><a href="javascript:;">四级菜单</a> </li>
										<li><a href="javascript:;">四级菜单</a> </li>
									</ul>
								</li>

							</ul>
						</li>
					</ul>
				</li>
				<li><a href="javascript:;">一级菜单</a></li>
				<li>
					<a href="javascript:;" title="1" onclick="sum1($(this),$(this).attr('title'))"><i></i>一级菜单</a>
					<ul class='t2'>
						<li><a href="javascript:;">二级菜单</a></li>

						<li>
							<a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>二级菜单</a>
							<ul class='t3'>
								<li><a href="javascript:;">三级菜单</a></li>

								<li>
									<a href="javascript:;" title="1" onclick="sum2($(this),$(this).attr('title'))"><i></i>三级菜单</a>
									<ul class='t4'>
										<li><a href="javascript:;">四级菜单</a> </li>
										<li><a href="javascript:;">四级菜单</a> </li>
									</ul>
								</li>
								<li><a href="javascript:;">三级菜单</a></li>

							</ul>
						</li>
						<li><a href="javascript:;">二级菜单</a></li>

					</ul>
				</li>
			</ul>
		</div>
	</body>
	<script src="./js/jquery.min.js"></script>
	<script>
		function sum1(e, h) {
			e.attr("title", parseInt(e.attr('title')) + 1);
			// console.log(h);
			//	e.parent().siblings().children('a').removeClass("current");
			e.parent().children("ul").toggle(500);
			if (h % 2 == 1) {
				e.children('i').css({
					'background-image': "url(img/leftJian.png)"
				});
				e.addClass("current");
				e.parent().siblings().children("ul").hide(500);
				e.parent().siblings().children('a').children("i").css({
					'background-image': "url(img/leftJia.png)"
				});
				//console.log(p);
				e.parent().siblings().children('a').removeClass("current");
				//var p=parseInt(e.parent().siblings().children('a').attr("title"))+1;
				var p = parseInt(e.parent().siblings().children('a').attr("title"));
				if (p % 2 == 0) {
					p++;
				} else if (p % 2 == 1) {
					p = p;
				}
				e.parent().siblings().children('a').attr('title', p);
				//console.log(e.parent().children("li").children("ul"));
			} else if (h % 2 == 0) {
				e.children('i').css({
					'background-image': "url(img/leftJia.png)"
				});
				e.removeClass("current");

			}
		}

		function sum2(e, s) {
			e.attr("title", parseInt(e.attr('title')) + 1);
			e.parent().siblings().children('a').removeClass("current");
			e.addClass("current");
			e.parent().children("ul").toggle(500);
			if (s % 2 == 1) {
				e.children('i').css({
					'background-image': "url(img/leftJian.png)"
				});
				e.addClass("current");
			} else if (s % 2 == 0) {
				e.children('i').css({
					'background-image': "url(img/leftJia.png)"
				});
				e.removeClass("current");
			}
			//e.parent().children().children("ul").hide();
		}
	</script>

</html>
